<template>
    <div>
        <!-- <comp ref="num"></comp> -->
        <div class="top" v-show="isvaild"><span>Hello,World</span><button @click="FUNC">编辑</button></div>
        <div class="text" v-show="!isvaild"><input type="text" ref="TEXT"><button @click="FUNC">确定</button>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, nextTick } from 'vue';
import comp from './comp.vue';
let isvaild = ref(true)
let TEXT = ref(null)
let FUNC=()=>
{
    isvaild.value=!isvaild.value
    TEXT.value.focus()
}
</script>

<style scoped>
.top {
    display: flex;
    justify-content: space-between;
    width: 230px;
    height: 50px;
    align-items: center;
}

.text {
    display: flex;
    justify-content: space-between;
    width: 230px;
    height: 50px;
    align-items: center;
}
</style>